import React, { Component } from 'react';
import { Input, Icon, Button  } from 'antd';
import PubSub from 'pubsub-js';

import 'antd/dist/antd.css';
import './Comment-add.css';
const { TextArea } = Input;

export default class CommentAdd extends Component{
    constructor(props) {
        super(props)
        this.state={
            name:"",
            content:""
        }
        this.change = this.change.bind(this)
        this.handleListadd = this.handleListadd.bind(this)
    }
    change(e){
        const {name,value} = e.target
        this.setState({
            [name]:value
        })
    }
    handleListadd(){
        
        this.props.handleListadd(this.state)
        this.setState({
            name:"",
            content:""
        })
        PubSub.publish('thisPubSubmsg','哈哈哈哈，Comment-add这个兄弟组件传过来的')
    }
    render(){
        return (
            <div className="item">
                <Input
                    onChange={this.change}
                    placeholder="输入你的姓名"
                    prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                    size="large"
                    value={this.state.name}
                    name="name"
                />
                <TextArea onChange={this.change} name="content" className="textarea" rows={4} value={this.state.content} />
                <Button className="btn" type="primary" onClick={this.handleListadd}>提交评论</Button>
            </div>
            
        )
    }
}